<template>
  <div class="editor">
    <!-- 标题 -->
    <div class="editor-title">
      <span>{{ selectedIndex === 'page' ? data.page.name : curItem.name }}</span>
    </div>

    <!-- 编辑器: 标题栏 -->
    <div v-if="selectedIndex === 'page'" class="editor-content">
      <a-tabs>
        <a-tab-pane key="1" tab="頁面設定">
          <div class="block-box">
            <div class="block-title">基本資訊</div>
            <div class="block-item">
              <span class="label">頁面名稱</span>
              <div class="flex-box">
                <a-input v-model="data.page.params.name" />
                <div class="tips">頁面名稱僅用於後臺管理</div>
              </div>
            </div>
            <div class="block-item">
              <span class="label">分享標題</span>
              <div class="flex-box">
                <a-input v-model="data.page.params.shareTitle" />
                <div class="tips">用戶端轉發時顯示的標題</div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="標題列設定">
          <div class="block-box">
            <div class="block-title">標題列設定</div>
            <div class="block-item">
              <span class="label">標題名稱</span>
              <div class="flex-box">
                <a-input v-model="data.page.params.title" />
                <div class="tips">用戶端端頂部顯示的標題</div>
              </div>
            </div>
            <div class="block-item">
              <span class="label">文字顏色</span>
              <a-radio-group buttonStyle="solid" v-model="data.page.style.titleTextColor">
                <a-radio-button value="white">白色</a-radio-button>
                <a-radio-button value="black">黑色</a-radio-button>
              </a-radio-group>
            </div>
            <div class="block-item">
              <span class="label">標題列背景</span>
              <div class="item-colorPicker">
                <span
                  class="rest-color"
                  @click="onEditorResetColor(data.page.style, 'titleBackgroundColor', '#fff')"
                >重置</span>
                <colorPicker v-model="data.page.style.titleBackgroundColor" defaultColor="#fff" />
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <template v-if="data.items.length && curItem">
      <!-- 搜索栏 -->
      <div v-if="curItem.type == 'search'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="block-box">
              <div class="block-title">功能設置</div>
              <div class="block-item">
                <span class="label">提示文字</span>
                <a-input v-model="curItem.params.placeholder" />
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">內容樣式</div>
              <div class="block-item">
                <span class="label">蒐索框樣式</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.searchStyle">
                  <a-radio-button value="square">方形</a-radio-button>
                  <a-radio-button value="radius">圓角</a-radio-button>
                  <a-radio-button value="round">圓弧</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">文字對齊</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.textAlign">
                  <a-radio-button value="left">居左</a-radio-button>
                  <a-radio-button value="center">居中</a-radio-button>
                  <a-radio-button value="right">居右</a-radio-button>
                </a-radio-group>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 辅助空白 -->
      <div v-if="curItem.type == 'blank'" class="editor-content">
        <div class="block-box">
          <div class="block-title">樣式設定</div>
          <div class="block-item">
            <span class="label">組件高度</span>
            <div class="item-slider">
              <a-slider v-model="curItem.style.height" :min="5" :max="200" />
              <span class="unit-text">
                <span>{{ curItem.style.height }}</span>
                <span>點數</span>
              </span>
            </div>
          </div>
          <div class="block-item">
            <span class="label">背景顏色</span>
            <div class="item-colorPicker">
              <span
                class="rest-color"
                @click="onEditorResetColor(curItem.style, 'background', '#fff')"
              >重置</span>
              <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
            </div>
          </div>
        </div>
      </div>

      <!-- 辅助线 -->
      <div v-if="curItem.type == 'guide'" class="editor-content">
        <div class="block-box">
          <div class="block-title">樣式設定</div>
          <div class="block-item">
            <span class="label">線條樣式</span>
            <a-radio-group buttonStyle="solid" v-model="curItem.style.lineStyle">
              <a-radio-button value="solid">實線</a-radio-button>
              <a-radio-button value="dashed">虛線</a-radio-button>
              <a-radio-button value="dotted">點狀</a-radio-button>
            </a-radio-group>
          </div>
          <div class="block-item">
            <span class="label">線條顏色</span>
            <div class="item-colorPicker">
              <span
                class="rest-color"
                @click="onEditorResetColor(curItem.style, 'lineColor', '#000')"
              >重置</span>
              <colorPicker v-model="curItem.style.lineColor" defaultColor="#000" />
            </div>
          </div>
          <div class="block-item">
            <span class="label">線條高度</span>
            <div class="item-slider">
              <a-slider v-model="curItem.style.lineHeight" :min="1" :max="20" />
              <span class="unit-text">
                <span>{{ curItem.style.lineHeight }}</span>
                <span>點數</span>
              </span>
            </div>
          </div>
          <div class="block-item">
            <span class="label">上下邊距</span>
            <div class="item-slider">
              <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
              <span class="unit-text">
                <span>{{ curItem.style.paddingTop }}</span>
                <span>點數</span>
              </span>
            </div>
          </div>
          <div class="block-item">
            <span class="label">背景顏色</span>
            <div class="item-colorPicker">
              <span
                class="rest-color"
                @click="onEditorResetColor(curItem.style, 'background', '#fff')"
              >重置</span>
              <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
            </div>
          </div>
        </div>
      </div>

      <!-- 富文本 -->
      <div v-if="curItem.type == 'richText'" :style="{ width: '395px' }" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="block-box">
              <div class="block-title">文字內容</div>
              <div class="ueditor">
                <Ueditor v-model="curItem.params.content" :config="{ initialFrameWidth: 375  }" />
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">上下邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingTop }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">左右邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingLeft" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingLeft }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">背景顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 店铺公告 -->
      <div v-if="curItem.type == 'notice'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="block-box">
              <div class="block-title">公告文案</div>
              <div class="block-item">
                <span class="label">内容</span>
                <a-input v-model="curItem.params.text" />
              </div>
              <div class="block-item">
                <span class="label">連結</span>
                <div class="flex-box">
                  <SLink v-model="curItem.params.link" />
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">內容樣式</div>
              <div class="block-item">
                <span class="label">文字顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'textColor', '#000')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.textColor" defaultColor="#000" />
                </div>
              </div>
              <div class="block-item">
                <span class="label">背景顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
                </div>
              </div>
            </div>
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">上下邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingTop }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 文章 -->
      <div v-if="curItem.type == 'article'" class="editor-content">
        <div class="block-box">
          <div class="block-title">文章内容</div>
          <div class="block-item">
            <span class="label">文章分類</span>
            <SArticleCate v-model="curItem.params.auto.category" />
          </div>
          <div class="block-item">
            <span class="label">顯示數量</span>
            <div class="block-item-right">
              <a-input-number v-model="curItem.params.auto.showNum" :min="1" :max="20" />
              <span class="unit-text">
                <span>篇</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 在线客服 -->
      <div v-if="curItem.type == 'service'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="block-box">
              <div class="block-title">功能設置</div>
              <div class="block-item">
                <span class="label">客服類型</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.params.type">
                  <a-radio-button value="chat">線上聊天</a-radio-button>
                  <a-radio-button value="phone">撥打電話</a-radio-button>
                </a-radio-group>
              </div>
              <div v-show="curItem.params.type == 'phone'" class="block-item">
                <span class="label">電話號碼</span>
                <a-input v-model="curItem.params.tel" />
              </div>
              <div class="block-item">
                <span class="label">客服圖標</span>
                <span class="tips-wrap">建議尺寸：90×90</span>
                <SImage v-model="curItem.params.image" :width="60" :height="60" />
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">底邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.bottom" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.bottom }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">右邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.right" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.right }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">不透明度</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.opacity" :min="0" :max="100" />
                  <span class="unit-text">
                    <span>{{ curItem.style.opacity }}</span>
                    <span>%</span>
                  </span>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 视频 -->
      <div v-if="curItem.type == 'video'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="block-box">
              <div class="block-title">功能設置</div>
              <div class="block-item">
                <span class="label">視頻地址</span>
                <div class="flex-box">
                  <a-input v-model="curItem.params.videoUrl" />
                  <div class="tips">僅支持.mp4格式的視頻源地址</div>
                </div>
              </div>
              <div class="block-item">
                <span class="label">視頻封面</span>
                <div class="flex-box">
                  <SImage v-model="curItem.params.poster" :width="160" :height="90" />
                  <div class="tips">建議封面圖片尺寸與視頻比例一致</div>
                </div>
              </div>
            </div>
            <div class="block-box">
              <div class="block-title">播放設定</div>
              <div class="block-item">
                <span class="label">自動播放</span>
                <span class="tips-wrap">僅支持小程式</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.params.autoplay">
                  <a-radio-button :value="1">開啟</a-radio-button>
                  <a-radio-button :value="0">關閉</a-radio-button>
                </a-radio-group>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">
                <span>內容樣式</span>
                <span class="tips">視頻寬度為750點數</span>
              </div>
              <div class="block-item">
                <span class="label">視頻高度</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.height" :min="50" :max="400" />
                  <span class="unit-text">
                    <span>{{ curItem.style.height }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">上下邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingTop }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 圖片 -->
      <div v-if="curItem.type == 'image'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="sub-title">添加圖片（最多10張，可拖動排序）</div>
            <draggable
              :list="curItem.data"
              v-bind="{ animation: 120, filter: 'input', preventOnFilter: false }"
            >
              <div v-for="(item, index) in curItem.data" :key="index" class="block-box drag">
                <div class="block-title">
                  <span class="left">圖片 {{ index + 1 }}</span>
                  <a class="link" @click="handleDeleleData(curItem, index)">删除</a>
                </div>
                <div class="block-item">
                  <div class="block-item-common">
                    <div class="block-item-common-row">
                      <span class="label">圖片</span>
                      <span class="label value">{{ item.imgName }}</span>
                    </div>
                    <div class="block-item-common-row">
                      <span class="label">連結</span>
                      <SLink v-model="item.link" />
                    </div>
                  </div>
                  <div class="block-item-custom">
                    <SImage
                      v-model="item.imgUrl"
                      tips="建議尺寸：宽750"
                      @update="item.imgName = $event.file_name"
                    />
                  </div>
                </div>
              </div>
            </draggable>
            <div v-if="curItem.data.length < 10" class="data-add">
              <a-button icon="plus" @click="handleAddData(10)">添加圖片</a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">上下邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingTop }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">左右邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingLeft" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingLeft }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">背景顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 轮播图 -->
      <div v-if="curItem.type == 'banner'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="sub-title">添加圖片（最多10張，可拖動排序）</div>
            <draggable
              :list="curItem.data"
              v-bind="{ animation: 120, filter: 'input', preventOnFilter: false }"
            >
              <div v-for="(item, index) in curItem.data" :key="index" class="block-box drag">
                <div class="block-title">
                  <span class="left">圖片 {{ index + 1 }}</span>
                  <a class="link" @click="handleDeleleData(curItem, index)">删除</a>
                </div>
                <div class="block-item">
                  <div class="block-item-common">
                    <div class="block-item-common-row">
                      <span class="label">圖片</span>
                      <span class="label value">{{ item.imgName }}</span>
                    </div>
                    <div class="block-item-common-row">
                      <span class="label">連結</span>
                      <SLink v-model="item.link" />
                    </div>
                  </div>
                  <div class="block-item-custom">
                    <SImage
                      v-model="item.imgUrl"
                      tips="建議尺寸：750×400"
                      @update="item.imgName = $event.file_name"
                    />
                  </div>
                </div>
              </div>
            </draggable>
            <div v-if="curItem.data.length < 10" class="data-add">
              <a-button icon="plus" @click="handleAddData(10)">添加圖片</a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">內容樣式</div>
              <div class="block-item">
                <span class="label">訓示點形狀</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.btnShape">
                  <a-radio-button value="round">圓形</a-radio-button>
                  <a-radio-button value="square">正方形</a-radio-button>
                  <a-radio-button value="rectangle">長方形</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">訓示點顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'btnColor', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.btnColor" defaultColor="#fff" />
                </div>
              </div>
              <div class="block-item">
                <span class="label">切換時間</span>
                <div class="item-slider" style="width: 190px;">
                  <a-slider v-model="curItem.style.interval" :step="1" :min="1" :max="20" />
                  <span class="unit-text">
                    <span>{{ curItem.style.interval }}</span>
                    <span>秒</span>
                  </span>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 商品组 -->
      <div v-if="curItem.type == 'goods'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="block-box">
              <div class="block-title">
                <span>商品來源</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.params.source">
                  <a-radio-button value="auto">自動獲取</a-radio-button>
                  <a-radio-button value="choice">手動選擇</a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <!-- 手動選擇 -->
            <div v-if="curItem.params.source === 'choice'" class="block-box">
              <div class="block-title">選擇商品 ({{ curItem.data.length }})</div>
              <SGoods v-model="curItem.data" />
            </div>
            <!-- 自動獲取 -->
            <div v-if="curItem.params.source === 'auto'" class="block-box">
              <div class="block-title">商品内容</div>
              <div class="block-item">
                <span class="label">商品分類</span>
                <SGoodsCate v-model="curItem.params.auto.category" />
              </div>
              <div class="block-item">
                <span class="label">商品排序</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.params.auto.goodsSort">
                  <a-radio-button value="all">默認</a-radio-button>
                  <a-radio-button value="sales">銷量</a-radio-button>
                  <a-radio-button value="price">價格</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">顯示數量</span>
                <div class="block-item-right">
                  <a-input-number v-model="curItem.params.auto.showNum" :min="1" :max="50" />
                  <span class="unit-text">
                    <span>件</span>
                  </span>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">內容樣式</div>
              <div class="block-item">
                <span class="label">顯示類型</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.display">
                  <a-radio-button value="list">清單平鋪</a-radio-button>
                  <a-radio-button :disabled="curItem.style.column === 1" value="slide">橫向滑動</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">分列數量</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.column">
                  <a-radio-button :disabled="curItem.style.display !== 'list'" :value="1">單列</a-radio-button>
                  <a-radio-button :value="2">兩列</a-radio-button>
                  <a-radio-button :value="3">三列</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">顯示內容</span>
                <div class="item-checkbox" :style="{ width: '180px' }">
                  <a-checkbox-group v-model="curItem.style.show">
                    <a-checkbox value="goodsName">商品名稱</a-checkbox>
                    <a-checkbox value="goodsPrice">商品價格</a-checkbox>
                    <a-checkbox value="linePrice">划线價格</a-checkbox>
                    <a-checkbox v-show="curItem.style.column === 1" value="sellingPoint">商品賣點</a-checkbox>
                    <a-checkbox v-show="curItem.style.column === 1" value="goodsSales">商品銷量</a-checkbox>
                  </a-checkbox-group>
                </div>
              </div>
            </div>
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">背景顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 导航 -->
      <div v-if="curItem.type == 'navBar'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="sub-title">添加導航（最少4個，最多10個，可拖動排序）</div>
            <draggable
              :list="curItem.data"
              v-bind="{ animation: 120, filter: 'input', preventOnFilter: false }"
            >
              <div v-for="(item, index) in curItem.data" :key="index" class="block-box drag">
                <div class="block-title">
                  <span class="left">导航 {{ index + 1 }}</span>
                  <a class="link" @click="handleDeleleData(curItem, index)">删除</a>
                </div>
                <div class="block-item">
                  <div class="block-item-common">
                    <div class="block-item-common-row">
                      <span class="label">名稱</span>
                      <a-input v-model="item.text" />
                    </div>
                    <div class="block-item-common-row">
                      <span class="label">連結</span>
                      <SLink v-model="item.link" />
                    </div>
                  </div>
                  <div class="block-item-custom">
                    <SImage v-model="item.imgUrl" tips="建議尺寸：100×100" />
                  </div>
                </div>
              </div>
            </draggable>
            <div v-if="curItem.data.length < 10" class="data-add">
              <a-button icon="plus" @click="handleAddData(10)">添加導航</a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">內容樣式</div>
              <div class="block-item">
                <span class="label">每行數量</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.rowsNum">
                  <a-radio-button :value="3">3个</a-radio-button>
                  <a-radio-button :value="4">4个</a-radio-button>
                  <a-radio-button :value="5">5个</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">文字顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'textColor', '#000')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.textColor" defaultColor="#000" />
                </div>
              </div>
            </div>
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">上下邊距</span>
                <div class="item-slider">
                  <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingTop }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">背景顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 櫥窗 -->
      <div v-if="curItem.type == 'window'" class="editor-content">
        <a-tabs>
          <a-tab-pane key="1" tab="內容設定">
            <div class="sub-title">添加圖片 (最多10个，可拖动排序)</div>
            <draggable
              :list="curItem.data"
              v-bind="{ animation: 120, filter: 'input', preventOnFilter: false }"
            >
              <div v-for="(item, index) in curItem.data" :key="index" class="block-box drag">
                <div class="block-title">
                  <span class="left">圖片 {{ index + 1 }}</span>
                  <a class="link" @click="handleDeleleData(curItem, index)">删除</a>
                </div>
                <div class="block-item">
                  <div class="block-item-common">
                    <div class="block-item-common-row">
                      <span class="label">名稱</span>
                      <span class="label value">{{ item.imgName }}</span>
                    </div>
                    <div class="block-item-common-row">
                      <span class="label">連結</span>
                      <SLink v-model="item.link" />
                    </div>
                  </div>
                  <div class="block-item-custom">
                    <SImage v-model="item.imgUrl" @update="item.imgName = $event.file_name" />
                  </div>
                </div>
              </div>
            </draggable>
            <div v-if="curItem.data.length < 10" class="data-add">
              <a-button icon="plus" @click="handleAddData(10)">添加圖片</a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="樣式設定">
            <div class="block-box">
              <div class="block-title">內容樣式</div>
              <div class="block-item">
                <span class="label">每行數量</span>
                <a-radio-group buttonStyle="solid" v-model="curItem.style.layout">
                  <a-radio-button :value="2">2列</a-radio-button>
                  <a-radio-button :value="3">3列</a-radio-button>
                  <a-radio-button :value="4">4列</a-radio-button>
                  <a-radio-button :value="-1">櫥窗</a-radio-button>
                </a-radio-group>
              </div>
              <div class="block-item">
                <span class="label">上下邊距</span>
                <div class="item-slider" :style="{ width: '210px' }">
                  <a-slider v-model="curItem.style.paddingTop" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingTop }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
              <div class="block-item">
                <span class="label">左右邊距</span>
                <div class="item-slider" :style="{ width: '210px' }">
                  <a-slider v-model="curItem.style.paddingLeft" :min="0" :max="50" />
                  <span class="unit-text">
                    <span>{{ curItem.style.paddingLeft }}</span>
                    <span>點數</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="block-box">
              <div class="block-title">組件樣式</div>
              <div class="block-item">
                <span class="label">背景顏色</span>
                <div class="item-colorPicker">
                  <span
                    class="rest-color"
                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                  >重置</span>
                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import vcolorpicker from 'vcolorpicker'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import draggable from 'vuedraggable'
import { Ueditor } from '@/components'
import { SImage, SArticleCate, SGoods, SGoodsCate, SLink } from './modules'

Vue.use(vcolorpicker)

export default {
  props: {
    // 页面装修默認数据
    defaultData: PropTypes.object.def({}),
    // 页面数据
    data: PropTypes.object.def({}),
    // 当前选中的元素
    curItem: PropTypes.object.def({}),
    // 当前选中的元素索引
    selectedIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(0)
  },
  components: {
    draggable,
    Ueditor,
    SImage,
    SArticleCate,
    SGoods,
    SGoodsCate,
    SLink
  },
  data () {
    return {}
  },
  methods: {

    // 新增数据
    handleAddData (max = 1) {
      const { defaultData, curItem } = this
      const newDataItem = defaultData.items[curItem.type].data[0]
      curItem.data.push(_.cloneDeep(newDataItem))
    },

    /**
     * 编辑器：删除data元素
     * @param curItem
     * @param index
     */
    handleDeleleData (curItem, index) {
      if (curItem.data.length <= 1) {
        this.$message.warning('至少保留一個')
        return false
      }
      curItem.data.splice(index, 1)
    },

    /**
     * 重置颜色
     * @param holder
     * @param attribute
     * @param color
     */
    onEditorResetColor (holder, attribute, color) {
      holder[attribute] = color
    }

  }
}
</script>
<style lang="less" scoped>
@import './style.less';
</style>
